<style lang="scss" scoped>
    @import "./../css/detail.scss";
</style>

<template>
    <div>
        <HeaderCompoent/>
        <div class="page">
            <div class="classification-list">
                <ul>
                    <li v-for="(item , index) in tabList" :key="index" @click="clickNav(item.to)">{{item.text}}</li>
                </ul>
                <div class="wraper-content swiper-container" ref="swiper">
                    <div class="swiper-scrollbar"></div>
                    <ul class="page swiper-wrapper">
                        <li class="swiper-slide" v-for="item in tabList" :key="item.to" :name="item.text">
                            <component :is="item.component" v-if="item.is"></component>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- <FooterCompoent/> -->
    </div>
</template>
<script>
    import Swiper from 'swiper' ;
    import HeaderCompoent from './../components/header' ;
    import FooterCompoent from './../components/footer' ;
    import routerLink from './../components/routerLink';

    //懒加载写法
    const musicComponent = () => import('./index/music');
    const radioComponent = () => import('./index/radio');
    const viedoComponent = () => import('./index/viedo');

    import router from './../router/index';

    let tabList = [
        {
            to: 'music',
            text: '音乐',
            component: musicComponent,
            //是否已经渲染过
            is:false,
            active:false
        },
        {
            to: 'video',
            text: '视频',
            component: viedoComponent,
            is:false,
            active:false
        },
        {
            to: 'radio',
            text: '电台',
            component: radioComponent,
            is:false,
            active:false
        }
    ];


    export default {

        data() {
            const { name } = this.$route.params || {};
            return {
                tabList: tabList.map( tab => {
                    if( tab.to === name ){
                        tab.active = true;
                        tab.is = true;
                    }
                    return tab;
                }),
                mySwiper: null
            }
        },

        mounted() {
            this.initSwiper();
        },

        watch: {
            '$route'({ params }){
                this.tabList.forEach(( item , index ) => {
                    if ( item.to === params.name ) {
                        item.is = true;
                        item.active = true;
                        this.mySwiper.slideTo( index, 500, false)
                    } else {
                        item.active = false;
                    }
                });
            }
        },

        components: {
            HeaderCompoent,
            FooterCompoent,
            routerLink
        },
        methods: {
            initSwiper() {
                this.mySwiper = new Swiper(this.$refs.swiper, {
                    scrollbar: '.swiper-scrollbar',
                    scrollbarHide: false,
                    scrollbarDraggable: true,
                    scrollbarSnapOnRelease: true,
                    initialSlide: this.tabList.findIndex( tab => tab.active )
                });
                let _this = this;
                //过渡结束后获取当前索引值
                this.mySwiper.on('transitionEnd', function (event) {
                    let {activeIndex} = _this.mySwiper;
                    router.push({path: '/detail/' + _this.tabList[activeIndex].to})
                })
            },
            clickNav(name) {
                router.push({path: '/detail/' + name})
            }
        }
    }
</script>